<template>
    <div class="snow-page">
        <div id="map">
            <div class="map-control">
                <div class="temp">
                    <div class="form">

                        <span style="margin-top: 20px;margin-left: 10px;color: aliceblue;">乡镇：</span>
                        <a-select v-model="townshipId" placeholder="请选择"
                            style="width: 250px;height: 34px;margin-top: 10px;line-height: 40px;" filterable clearable>
                            <a-option v-for="item in optionsList" :key="item.id" :label="item.name" :value="item.id">
                            </a-option>
                        </a-select>

                        <a-button type="primary" style="margin:10px;color: black;" @click="handleSearch">搜索</a-button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue"
import { getCommTownsAPI } from "@/api/modules/commTowns/index";
import { getnwTreatmentList } from "@/api/modules/nwTreatment/index";
//====================变量==================
const map = ref(null) as any

const optionsList = ref([]) as any
const townshipId = ref("")
const markers = ref([]) as any

const rk = ref(0)
//==========================方法==============
onMounted(() => {
    initMap()
    intiData()
    getDataInfo()
})

function initMap() {
    BM.Config.HTTP_URL = "http://10.10.1.32:9100";
    BM.accessToken =
        "pk.eyJ1IjoiY3VzXzljZW96bWJ3IiwiYSI6ImRqOTJsbDRyZXVlZWk4dXFiZjN3YnJieWoifQ.Yw7t2EpnBZSj8E1_b13k0w";
    map.value = BM.map("map", "bigemap.c38vsig1", {
        center: [31.56604766845703, 121.67838287353516],
        zoom: 2,
        zoomControl: false,
        attributionControl: false
    });
    // map.value.zoomIn();

    map.value.fitBounds([
        [31.257471084594727, 121.11383819580078],
        [31.87462615966797, 122.242919921875]
    ]);
}

function handleSearch() {
    getDataInfo()
}

async function intiData() {
    let res = await getCommTownsAPI() as any
    if (res.success) {
        optionsList.value = res.data
    }
}

async function getDataInfo() {
    let obj = {
        "sourceOutfallSettingApprovalDtoFilter": {
            "outfall": rk.value,
            "township": townshipId.value
        },
        "sourceOutfallDtoFilter": {
            "addr": "2"
        },
        "orderParam": null,
        "pageParam": {
            "pageNum": 1,
            "pageSize": 999,
            "count": true
        }
    }
    const customIcon = BM.icon({
        iconUrl: "/icons/location.png",
        iconSize: [30, 30], // 图标大小
        iconAnchor: [12, 12], // 图标锚点（相对于图标左上角）
    });
    clearAllMarkers();
    let res = await getnwTreatmentList(obj) as any;

    for (let i = 0; i < res.data.dataList.length; i++) {

        if (res.data.dataList[i].latitude) {
            const marker = BM.marker([res.data.dataList[i].latitude, res.data.dataList[i].longitude], {
                icon: customIcon
            }).addTo(map.value);
            markers.value.push(marker);

            marker.bindPopup(pointTemplate(res.data.dataList[i]))
        }
    }

}

function clearAllMarkers() {
    markers.value.forEach((marker: any) => {
        map.value.removeLayer(marker);
    });
    markers.value = []; // 清空数组
}

function pointTemplate(data: any) {
    return `
      <div class="popup-content detail-view">
        <h3>${data.facilityName}</h3>
        <p>地址:${data.village}</p>
        <p>时间:${formatDate(data.monitoringDate)}</p>
      
      </div>
    `;
}

function formatDate(val: any) {
    const date = new Date(val);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 加1并补零
    const day = String(date.getDate()).padStart(2, '0'); // 补零

    return `${year}-${month}-${day}`;
}
</script>

<style lang="scss" scoped>
.home-page {
    padding: $padding;
    background: $color-bg-1;
}

#map {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #00557f;

    .map-control {
        position: absolute;

        // top: 10px;
        // left: 10px;
        z-index: 1000;

        button {
            cursor: pointer;
            // padding: 6px 12px;
            background: white;
            border: 1px solid #cccccc;
        }
    }
}

.temp {
    position: absolute;
    width: 100vw;

    // top: 10px;
    height: fit-content;
    background-color: #335869;

    // margin-left: 40px;
    // min-height: 60px;
    .form {
        display: flex;
    }
}
</style>